<template>
  <div id="userReserve">
      <p class="total">您总共有2比预约记录</p>
      <div class="lable">
          <div class="while">2017年9月<span>有2比预约记录</span><span></span></div>
          <div class="content">
              <div class="item">
                  <div class="state">  
                      <img src="http://cdn.shangrongfintech.com/static/images/orderStatus1.png">
                  </div>
                  <div class="left">
                        <p>预约购买:<span>2017-12-16 10:30:15</span></p>
                        <p>购买产品:$type</p>
                        <p>购买金额:$money</p>
                  </div>
              </div>
              <div class="item">
                  <div class="state">  
                      <img src="http://cdn.shangrongfintech.com/static/images/orderStatus2.png">
                  </div>
                  <div class="left">
                        <p>预约购买:<span>2017-12-16 10:30:15</span></p>
                        <p>购买产品:$type</p>
                        <p>购买金额:$money</p>
                  </div>
              </div>
              <div class="item">
                  <div class="state">  
                      <img src="http://cdn.shangrongfintech.com/static/images/orderStatus3.png">
                  </div>
                  <div class="left">
                        <p>预约购买:<span>2017-12-16 10:30:15</span></p>
                        <p>购买产品:$type</p>
                        <p>购买金额:$money</p>
                  </div>
              </div>
          </div>
      </div>
  </div>
</template>
<script>
export default {
  
}
</script>
<style scoped>
*{
    box-sizing: border-box;
}
#userReserve{
    width: 100%;
}
.total{
    line-height: 1.5rem;
    width: 100%;
    height: 1.5rem;
    background: #eee;
}
.lable{
    width: 100%;
    padding: .5rem;
}
.while{
    width: 100%;
    height: 1.5rem;
    line-height: 1.5rem;
    position: relative;
}
.while span:nth-child(1){
    padding-left: 1rem;
    font-size: .4rem;
    color:#ccc;
}
.while span:nth-child(2){
    display: inline-block;
    width: 1rem;
    height: 1rem;
    position: absolute;
    top: 0 ;
    right: 0;
   background: url("http://cdn.shangrongfintech.com/static/images/shan.png");
   background-repeat: no-repeat;
   background-position: center; 
}
.item{
    width: 100%;
    position: relative;
    border-top: 2px dashed #66ccca;
    padding: .8rem 0;
}
.state{
    position: absolute;
    top: 2rem;
    right: 0;
}
.left{
    position: relative;
}
.left>p:nth-child(1){
    margin-bottom: .5rem;
    font-size: .8rem;
}
.left>p:nth-child(1)>span{
    font-size: .5rem;
    color: #bbb;
    position: absolute;
    top:0;
    right: 0;
}
</style>
